﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Mi</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">

body {
	margin:0px;
	padding:0px;
	font-size:15px;
}

.clear {
	clear:both;
}

.clearfix {
}

.clearfix:after {
	display:table;
	content:"";
	width:0;
	clear:both;
}

.container {
	position:relative;
	width:1200px;
	margin-left:auto;
	margin-right:auto;
}

.container:after {
	display:table;
	content:"";
	width:0;
	clear:both;
}

a {
	color:#757575;
	text-decoration:none;
}

span.sep {
	margin:3px;
	color:#fff;
}

.site-topbar {
	background:#333;
	height:40px;
	line-height:40px;
	font-size:12px;
}

.site-topbar a {
	color:#b0b0b0;
}

.site-topbar a:hover {
	color:#fff;
}

.site-topbar span.sep {
	color:#333;
}

.topbar-nav {
	float:left;
}

.topbar-user {
	float:right;
}

.site-header {
	height:100px;
	font-size:16px;
}

.header-logo {
	float:left;
}

.header-logo a.logo {
	display:block;
	width:56px;
	height:56px;
	background:url('http://s01.mifile.cn/i/logo.png') no-repeat 0 0;
	margin-top:22px;
}

.header-nav {
	float:right;
}

.header-nav a {
	color:#333;
}

ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

ul li {
	margin:0px;
	padding:0px;
}

.nav-list {
	float:right;
	list-style-type:none;
	margin:0px;
	padding:0px 20px;
}

.nav-item {
	float:left;
	margin:0px;
	padding:0px;
}

.nav-item a {
	display:block;
	height:100px;
	line-height:100px;
	padding-left:10px;
	padding-right:10px;
}

.nav-item a:hover {
	color:#ff6709;
}

.header-search {
	position:relative;
	float:right;
}

.search-form {
	position:relative;
	width:300px;
	height:50px;
	margin-top:26px;
}

.search-text {
	position:absolute;
	right:59px;
	border:1px solid #e0e0e0;
	width:228px;
	height:48px;
	line-height:48px;
	padding:0px 10px;
	font-size:16px;
	color:#333;
}

.search-btn {
	position:absolute;
	right:0px;
	z-index:2;
	border:1px solid #e0e0e0;
	width:60px;
	height:50px;
	line-height:48px;
	font-size:16px;
	color:#333;
	background-color:#fff;
}

.site-home-hero {
	background-color:#fff;
}

.side-category {
	position:relative;
	background-color:#5f5750;
	width:234px;
	height:460px;
}

.side-category-list {
	padding-top:20px;
}

.side-category-item {
}

.side-category-item a.cate-link {
	position:relative;
	display:block;
	height:40px;
	line-height:40px;
	padding-left:30px;
	font-size:16px;
	color:#fff;
}

.side-category-item a.cate-link:hover {
	background-color:#ff6700;
}

span.category-right-arrow {
	display:inline-block;
	width:22px;
	height:22px;
	line-height:22px;
	position:absolute;
	right:20px;
	top:9px;
	background:url('res/img/icon_right_arrow_1.png') no-repeat;
}

.category-submenu {
	position:absolute;
	display:none;
	left:234px;
	top:0px;
	width:468px;
	height:460px;
	background-color:#fff;
	z-index:11;
}

.side-category-item:hover .category-submenu {
	display:block;
}

.btn {
	display:inline-block;
	width:58px;
	height:23px;
	line-height:23px;
	text-align:center;
	font-size:15px;
	color:#ff6700;
	border:1px solid #ff6700;
	background-color:#fff;
}

.btn:hover {
	background-color:#ff6700;
	color:#fff;
}

.side-category-subitem {
}

.side-category-subitem .subcate-link {
	display:inline-block;
	width:150px;
	padding:20px 40px;
	line-height:40px;
	color:#333;
}

.side-category-subitem .subcate-link img {
	border:none;
	vertical-align:middle;
}

.side-category-subitem .subcate-link span {
	display:inline-block;
	vertical-align:middle;
}

.btn-xuangou {
	width:58px;
	vertical-align:middle;
}

.side-hero-slider {
	position:absolute;
	width:966px;
	height:460px;
	right:0px;
	top:0px;
	background-color:#fff;
}

.site-footer {
	height:60px;
	line-height:20px;
	font-size:14px;
	text-align:center;
}

.p-center {
	text-align:center;
}

.footer-txt {
	color:#646464;
	margin-top:20px;
}

</style>
</head>
<body>
	<div class="site-topbar">
		<div class="container">
			<div class="topbar-nav">
				<a href="">小米</a>
				<span class="sep"></span>
				<a href="">问题反馈</a>
			</div>
			<div class="topbar-user">
				<a href="">登录</a>
				<span class="sep"></span>
				<a href="">注册</a>
				<span class="sep"></span>
				<a href="">购物车</a>
			</div>
		</div>
	</div>
	<div class="site-header">
		<div class="container">
			<div class="header-logo">
				<a class="logo" href=""></a>
			</div>
			<div class="header-search">
				<form class="search-form clearfix">
					<input type="text" name="keyword" class="search-text" autocomplete="off"/>
					<input type="submit" name="keyword" class="search-btn" value="搜索"/>
				</form>
			</div>
			<div class="header-nav">
				<ul class="nav-list clearfix">
					<li class="nav-item">
						<a href="">小米手机</a>
					</li>
					<li class="nav-item">
						<a href="">服务</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="site-home-hero container">
		<div class="container">
			<div class="side-category">
				<ul class="side-category-list">
					<li class="side-category-item">
						<a href="" class="cate-link">手机<span class="category-right-arrow"></span></a>
						<div class="category-submenu">
							<ul class="side-category-sublist">
								<li class="side-category-subitem">
									<a href="" class="subcate-link">
										<img src="http://c1.mifile.cn/f/i/g/2015/cn-index/5c_80.png" width="40px" height="40px"/>
										<span>小米5s</span>
									</a>
									<a href="" class="btn btn-xuangou">
										选购
									</a>
								</li>
								<li class="side-category-subitem">
									<a href="" class="subcate-link">
										<img src="http://c1.mifile.cn/f/i/g/2015/cn-index/5c_80.png" width="40px" height="40px"/>
										<span>小米note</span>
									</a>
								</li>
							</ul>
						</div>
					</li>
					<li class="side-category-item">
						<a href="" class="cate-link">电视<span class="category-right-arrow"></span></a>
					</li>
				</ul>
			</div>
			<div class="side-hero-slider">
				<img src="http://i3.mifile.cn/a4/xmad_14900824408499_rDVRz.jpg" width="966px" height="460px"/>
			</div>
		</div>
	</div>
	<div class="site-footer container">
		<p class="p-center footer-txt">
			<a href="">©mi.com</a>
		</p>
	</div>
</body>
</html>